<template>
	<view>
		<view class="city" @touchmove.stop.prevent="moveStop">
			<!-- #ifdef H5  -->
			<view class="city_close" @click="close_city"><uni-icons type="closeempty" size="20"></uni-icons></view>
			<!-- #endif -->
			<view class="city_title">当前城市</view>
			<view class="city_title_row">
				<uni-icons type="left" size="30" @click="goBack()" style="margin-right: 20rpx;"></uni-icons>
				<view class="city_title_row_name">{{ mapVal.city || '城市' }}</view>
				<!-- <view class="city_title_row_btn" @click="reposition">自动获取</view> -->
			</view>
			<!-- 添加输入框用于模糊查询 -->
			<view class="search-box">
				<input type="text" v-model="searchQuery" placeholder="请输入城市名" @input="handleSearch" />
			</view>
		</view>
		<view v-if="!searchQuery" class="indexed">
			<uni-indexed-list :options="filteredCityList" :showSelect="false" @click="bindClick"></uni-indexed-list>
		</view>
		<view>
			<view v-for="(item,index) in filteredCityList" @click="selectCity(item)" :key="index">
				<view style="color: #191919;line-height: 100rpx;border-bottom: 2rpx solid #DEDEDE;width: 710rpx; margin: 0 auto;">
					{{ item.cityName }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		nextTick,
		ref
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh,
		onReachBottom,
		onShareAppMessage,
		onShow
	} from '@dcloudio/uni-app';

	const city_list = ref([])
	const citys_list = ref([])
	const mapVal = ref({
		city: '北京',
		id: ''
	})
	const searchQuery = ref('') // 添加搜索查询变量

	onLoad(async (options) => {
		if (uni.getStorageSync('map')) {
			mapVal.value = uni.getStorageSync('map');
		}
		await getCityList();
	})

	// 获取城市数据
	async function getCityList() {
		uni.showLoading();
		city_list.value = await sheep.$api.movie.getCityList();
		console.log('this.city_list', city_list.value)
		citys_list.value = city_list.value.data
		city_list.value = city_list.value.result;
		console.log('citys_list', citys_list.value)
		console.log('222', city_list.value)
		uni.hideLoading();
	}

	function selectCity(item) {
		const obj = Object.assign({}, item)
		obj.city = obj.cityName
		uni.setStorageSync('map', obj);
		uni.navigateBack()
	}
	// 关闭
	function close_city() {
		uni.navigateBack();
	}

	function goBack() {
		uni.navigateBack({
			delta: 1
		})
	}

	// 重新定位
	async function reposition() {
		uni.showToast({
			title: '正在定位',
			duration: 1500,
			icon: 'loading'
		});
		// #ifdef MP-WEIXIN
		uni.getLocation({
			type: 'wgs84',
			success: function(res) {
				console.log('当前位置的经度：' + res);
				// console.log('当前位置的纬度：' + res.latitude);
			}
		});
		// map.value = await Map.wechat();
		// #endif
		// map.value.district = '';
		// map.value.district_code = '';

		uni.getLocation({
			type: 'wgs84',
			success: function(res) {
				console.log('当前位置的经度：' + res);
				// console.log('当前位置的纬度：' + res.latitude);
			}
		});
		uni.setStorageSync('map', mapVal.value);
		uni.showToast({
			title: '定位成功',
			duration: 1500,
			icon: 'none'
		});
	}

	// 手动选择城市
	async function bindClick(e) {
		console.log('e', e)
		if (e.item && e.item.name) {
			console.log(e.item.name)
			console.log('e', citys_list.value)
			mapVal.value.city = e.item.name
			mapVal.value.id = await citys_list.value.find(item => item.cityName === e.item.name)?.id
		}
		console.log('mapVbal', mapVal.value)
		uni.setStorageSync('map', mapVal.value);
		uni.navigateBack()
	}

	// 模糊查询处理函数
	function handleSearch() {
		console.log('city_list', citys_list.value)
		filteredCityList.value = citys_list.value.filter(city => city.cityName.includes(searchQuery.value));
		console.log('filteredCityList', filteredCityList.value)
	}

	// 计算属性，用于过滤城市列表
	const filteredCityList = computed(() => {
		if (searchQuery.value) {
			return citys_list.value.filter(city => city.cityName.includes(searchQuery.value));
		}
		return city_list.value;
	});
</script>

<style scoped lang="scss">
	page {
		// position: fixed;
	}

	.city {
		// position: fixed;
		padding-top: 120rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 690rpx;
		height: 180rpx;
		// left: 0;
		// right: 0;
		margin: 0 auto;

		&_close {
			position: absolute;
			right: 0;
			top: 10rpx;
			padding: 10rpx 20rpx;
		}

		&_title {
			font-weight: 600;

			&_row {
				display: flex;
				align-items: center;

				&_name {
					padding: 6rpx 33rpx;
					text-align: center;
					border-radius: 40rpx;
				}

				&_btn {
					padding: 6rpx 33rpx;
					text-align: center;
					border-radius: 40rpx;
					margin-left: 33rpx;
				}
			}
		}
	}

	// 添加搜索框样式
	.search-box {
		margin: 20rpx;

		input {
			width: 100%;
			padding: 10rpx;
			border: 1rpx solid #ccc;
			border-radius: 10rpx;
			height: 30rpx;
		}
	}

	::v-deep .uni-indexed-list {
		height: calc(100vh - 200rpx); // 调整高度以适应搜索框
		overflow: hidden;
		position: unset !important;
	}
</style>